<template>
  <div>
    <n-spin :show="loading" description="请稍候...">
      <div style="margin-bottom: 15px">
        <n-grid x-gap="15" :cols="4">
          <n-gi span="3" style="background: #FFF">
            <n-card :bordered="false" :header-style="{
                    padding: '25px 20px 20px',
                  }" :content-style="{
                    padding: '0 20px 8px',
                  }">
              <template #header>
                <text style="font-weight: 500;font-size: 20px;color: #3D3D3D;line-height: 28px;">基本信息</text>
              </template>
              <div class="member-info">
                <div class="headimg">
                  <img
                    v-if="data.avatar"
                    :src="data.avatar"
                    loading="lazy"
                    style="width: 100%; height: 100%; border-radius: 100%"
                    :onerror="avatarErr"
                  />
                  <img
                    v-else
                    src="~@/assets/images/mrtx.png"
                    style="width: 100%; height: 100%; border-radius: 100%"
                  />
                </div>
                <div class="info">
                  <div class="data-list">
                    <div class="data-list-item">
                      <div class="data-list-item-title">会员号：</div>
                      <div class="data-list-item-cont">{{ data.memberNo }}</div>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title">会员姓：</div>
                      <div class="data-list-item-cont">{{ data.firstName }}</div>
                      <a class="data-list-item-edit" href="javascript:void(0);" @click="handleEditBase('firstName', data)">修改</a>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title">会员分组：</div>
                      <div class="data-list-item-cont">{{ data.groupName }}</div>
                      <a class="data-list-item-edit" href="javascript:void(0);" @click="handleEditBase('group', data)">修改</a>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title">会员名：</div>
                      <div class="data-list-item-cont">{{ data.lastName }}</div>
                      <a class="data-list-item-edit" href="javascript:void(0);" @click="handleEditBase('lastName', data)">修改</a>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title">会员等级：</div>
                      <div class="data-list-item-cont">{{ data.levelName }}</div>
                      <a class="data-list-item-edit" href="javascript:void(0);" @click="handleEditBase('level', data)">修改</a>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title">会员全名：</div>
                      <div class="data-list-item-cont">{{ data.fullName }}</div>
                    </div>
                  </div>
                  <div class="data-list">
                    <div class="data-list-item">
                      <div class="data-list-item-title">手机号码：</div>
                      <div class="data-list-item-cont">{{ data.phoneArea ? data.phoneArea + ' ' : '' }}{{ data.phone ? data.phone : '&#45;&#45;' }}</div>
                      <a class="data-list-item-edit" href="javascript:void(0);" @click="handleEditBase('phone', data)">修改</a>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title">注册来源：</div>
                      <div class="data-list-item-cont">{{ data.source }}</div>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title">电子邮箱：</div>
                      <div class="data-list-item-cont">{{ data.mail ? data.mail : '&#45;&#45;' }}</div>
                      <a class="data-list-item-edit" href="javascript:void(0);" @click="handleEditBase('mail', data)">修改</a>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title">注册IP：</div>
                      <div class="data-list-item-cont">{{ data.registerIp }}</div>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title">推荐人：</div>
                      <div class="data-list-item-cont">{{ data.referrerName }}</div>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title">注册时间：</div>
                      <div class="data-list-item-cont">{{ data.registerTime }}</div>
                    </div>
                  </div>
                  <div class="data-list">
                    <div class="data-list-item">
                      <div class="data-list-item-title" style="width: 106px">最后登录IP：</div>
                      <div class="data-list-item-cont">{{ data.lastLoginIp }}</div>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title" style="width: 106px">注册设备型号：</div>
                      <div class="data-list-item-cont">{{ data.registerMpModel ? data.registerMpModel : '--' }}</div>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title" style="width: 106px">最后登录时间：</div>
                      <div class="data-list-item-cont">{{ data.lastLogin }}</div>
                    </div>
                    <div class="data-list-item">
                      <div class="data-list-item-title" style="width: 106px">注册设备码：</div>
                      <div class="data-list-item-cont">{{ data.registerMdCode ? data.registerMdCode : '--' }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </n-card>
          </n-gi>
          <n-gi style="background: #FFF">
            <n-card :bordered="false" :header-style="{
                    padding: '25px 20px 10px',
                  }" :content-style="{
                    padding: '0 20px 25px',
                  }">
              <template #header>
                <text style="font-weight: 500;font-size: 20px;color: #3D3D3D;line-height: 28px;">账户信息</text>
              </template>
              <div class="member-info">
                <div class="info">
                  <div class="data-list-item1">
                    <div class="data-list-item-title1">会员积分：</div>
                    <div class="data-list-item-cont1">{{ data.balance }}</div>
                    <a class="data-list-item-edit1" href="javascript:void(0);" @click="handleEditBalance(data.balance)">修改</a>
                  </div>
                  <div class="data-list-item1">
                    <div class="data-list-item-title1">会员成长值：</div>
                    <div class="data-list-item-cont1">{{ data.exp }}</div>
                    <a class="data-list-item-edit1" href="javascript:void(0);" @click="handleEditExp(data.exp)">修改</a>
                  </div>
                </div>
              </div>
            </n-card>
          </n-gi>
        </n-grid>
      </div>
      <n-grid :cols="1">
        <n-gi>
          <n-card :bordered="false" :header-style="{
                    padding: '25px 20px 20px',
                  }" :content-style="{
                    padding: '0 20px 25px',
                  }">
            <template #header>
              <text style="font-weight: 500;font-size: 20px;color: #3D3D3D;line-height: 28px;">会员明细</text>
            </template>
            <div class="statusTab">
              <div :class="tabValue=='BAL' ? 'active' : ''"><span @click="handleUpdateValue('BAL')">积分</span></div>
              <div :class="tabValue=='EXP' ? 'active' : ''"><span @click="handleUpdateValue('EXP')">成长值</span></div>
              <div :class="tabValue=='HOTEL' ? 'active' : ''"><span @click="handleUpdateValue('HOTEL')">住宿订单</span></div>
              <div :class="tabValue=='COUPON' ? 'active' : ''"><span @click="handleUpdateValue('COUPON')">优惠券</span></div>
            </div>
            <template v-if="tabValue=='BAL'">
              <BasicForm  ref="searchBalanceFormRef" @register="registerBalance" @submit="reloadBalanceTable" @reset="reloadBalanceTable" @keyup.enter="reloadBalanceTable">
                <template #statusSlot="{ model, field }">
                  <n-input v-model:value="model[field]" />
                </template>
              </BasicForm>
              <BasicTable  ref="actionBalanceRef" :columns="balanceColumns" :request="loadBalanceDataTable" :scroll-x="scrollBalanceX" :resizeHeightOffset="-10000">
              </BasicTable>
            </template>
            <template v-else-if="tabValue=='EXP'">
              <BasicForm  ref="searchExpFormRef" @register="registerExp" @submit="reloadExpTable" @reset="reloadExpTable" @keyup.enter="reloadExpTable">
                <template #statusSlot="{ model, field }">
                  <n-input v-model:value="model[field]" />
                </template>
              </BasicForm>
              <BasicTable  ref="actionExpRef" :columns="expColumns" :request="loadExpDataTable" :scroll-x="scrollExpX" :resizeHeightOffset="-10000">
              </BasicTable>
            </template>
            <template v-else-if="tabValue=='HOTEL'">
              <BasicForm  ref="searchHotelOrderFormRef" @register="registerHotelOrder" @submit="reloadHotelOrderTable" @reset="reloadHotelOrderTable" @keyup.enter="reloadHotelOrderTable">
                <template #statusSlot="{ model, field }">
                  <n-input v-model:value="model[field]" />
                </template>
              </BasicForm>
              <BasicTable  ref="actionHotelOrderRef" :columns="hotelOrderColumns" :actionColumn="hotelOrderActionColumn" :request="loadHotelOrderDataTable" :scroll-x="scrollHotelOrderX" :resizeHeightOffset="-10000">
              </BasicTable>
            </template>
            <template v-else-if="tabValue=='COUPON'">
              <BasicTable  ref="actionCouponRef" :columns="couponColumns" :request="loadCouponDataTable" :scroll-x="scrollCouponX" :resizeHeightOffset="-10000">
              </BasicTable>
            </template>
          </n-card>
        </n-gi>
      </n-grid>
    </n-spin>

    <HotelOrderView ref="hotelOrderViewRef" />
    <FoodOrderView ref="foodOrderViewRef" />
    <CarOrderView ref="carOrderViewRef" />
    <SpaOrderView ref="spaOrderViewRef" />
    <EditBase ref="editBaseRef" @reloadInfo="getInfo" />
    <EditBalance ref="editBalanceRef" @reloadInfo="reloadBalanceInfo" />
    <EditExp ref="editExpRef" @reloadInfo="reloadExpInfo" />
  </div>
</template>

<script lang="ts" setup>
import { PencilSharp } from '@vicons/ionicons5'
import {onMounted, ref, computed, reactive, h} from 'vue';
import 'vue3-json-viewer/dist/index.css';
import { useRouter } from 'vue-router';
import {NButton, useMessage} from 'naive-ui';
import HotelOrderView from '@/views/pmsAppReservation/view.vue';
import FoodOrderView from '@/views/foodOrder/view.vue';
import CarOrderView from '@/views/carOrder/view.vue';
import SpaOrderView from '@/views/spaOrder/view.vue';
import { View } from '@/api/pmsMember';
import {getConfig} from "@/api/sys/config";
import {BasicForm, useForm} from "@/components/Form";
import {BasicTable, TableAction} from "@/components/Table";
import { balanceSchemas, loadBalanceOptions } from './view_balance_model';
import { expColumns, expSchemas, loadExpOptions } from './view_exp_model';
import { hotelOrderColumns, hotelOrderSchemas,loadOptions } from './view_hotel_order_model';
import { couponColumns, loadCouponOptions } from './view_coupon_model';
import {List as BalanceList} from "@/api/pmsBalanceChange";
import {List as ExpList} from "@/api/pmsExpChange";
import {List as HotelOrderList} from "@/api/pmsAppReservation";
import {adaTableScrollX} from "@/utils/hotgo";
import EditBase from '@/views/pmsMember/edit_base.vue';
import EditBalance from '@/views/pmsMember/edit_balance.vue';
import EditExp from '@/views/pmsMember/edit_exp.vue';
import {List as CouponList} from "@/api/pmsCoupon";
import defaultImg from "@/assets/images/mrtx.png";

const tabValue = ref('BAL')
const message = useMessage();
const router = useRouter();
const params = router.currentRoute.value.params;
const loading = ref(false);
const recommendModel = ref('');
const data = ref({});
const editBaseRef = ref();
const editBalanceRef = ref();
const editExpRef = ref();
const actionCouponRef = ref();

const hotelOrderViewRef = ref();
const foodOrderViewRef = ref();
const carOrderViewRef = ref();
const spaOrderViewRef = ref();

const actionBalanceRef = ref();
const searchBalanceFormRef = ref<any>({});
const [registerBalance, {}] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas: balanceSchemas,
});
const scrollBalanceX = computed(() => {
  return adaTableScrollX(balanceColumns, 0);
});

const actionExpRef = ref();
const searchExpFormRef = ref<any>({});
const [registerExp, {}] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas: expSchemas,
});
const scrollExpX = computed(() => {
  return adaTableScrollX(expColumns, 0);
});
const scrollCouponX = computed(() => {
  return adaTableScrollX(couponColumns, 0);
});



const actionHotelOrderRef = ref();
const searchHotelOrderFormRef = ref<any>({});
const [registerHotelOrder, {}] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas: hotelOrderSchemas,
});
const scrollHotelOrderX = computed(() => {
  return adaTableScrollX(hotelOrderColumns, hotelOrderActionColumn.width);
});

const hotelOrderActionColumn = reactive({
  width: 160,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction as any, {
      style: 'button',
      actions: [
        {
          label: '详情',
          onClick: handleHotelOrderView.bind(null, record),
        },
      ],
    });
  },
});



const getInfo = () => {
  loading.value = true;
  View(params)
    .then((res) => {
      if((res.referrer <= 0 && res.lastReferrer <= 0) || (!res.referrerDetail && !res.LastReferrerDetail)){
        res.referrerName = '无';
      }else{
        if(recommendModel.value == 'FIRST'){
          if(!res.referrerDetail){
            res.referrerName = '无';
          }else{
            if(res.referrerDetail.rebateMode == 'CHANNEL'){
              res.referrerName = '渠道(' + res.referrerDetail.memberNo + ')'
            }else if(res.referrerDetail.rebateMode == 'STAFF'){
              res.referrerName = '员工(' + res.referrerDetail.memberNo + ')'
            }else{
              res.referrerName = '会员(' + res.referrerDetail.memberNo + ')'
            }
          }
        }else{
          if(!res.LastReferrerDetail){
            res.referrerName = '无';
          }else{
            if(res.LastReferrerDetail.rebateMode == 'CHANNEL'){
              res.referrerName = '渠道(' + res.LastReferrerDetail.memberNo + ')'
            }else if(res.LastReferrerDetail.rebateMode == 'STAFF'){
              res.referrerName = '员工(' + res.LastReferrerDetail.memberNo + ')'
            }else{
              res.referrerName = '会员(' + res.LastReferrerDetail.memberNo + ')'
            }
          }
        }
      }

      res.levelName = res.memberLevel.levelName
      res.groupName =  res.memberGroup ? res.memberGroup.memberGroup : '--'
      data.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
};

const balanceColumns = [
  {
    title: 'ID',
    key: 'id',
    align: 'left',
    width: 100,
  },
  {
    title: '方向',
    key: 'changePrice',
    align: 'left',
    width: 80,
    render(row) {
      return h(
        'span',
        {
          style: {
            color: row.changePrice > 0 ? 'green' : 'red'
          },
        },
        {
          default: () => row.changePrice > 0 ? '发放' : '消耗'
        }
      )
    },
  },
  {
    title: '发生场景',
    key: 'scene',
    align: 'left',
    width: 80,
    render(row) {
      if(row.scene == 'SYSTEM'){
        return '系统'
      }else if(row.scene == 'HOTEL'){
        return '酒店'
      }else if(row.scene == 'FOOD'){
        return '餐饮'
      }else if(row.scene == 'SPA'){
        return '按摩'
      }else if(row.scene == 'CAR'){
        return '出行'
      }else{
        return '未知'
      }
    },
  },
  {
    title: '积分变化',
    key: 'changePrice',
    align: 'left',
    width: 200,
    render(row) {
      return h(
        'span',
        {
          style: {
            color: row.changePrice > 0 ? 'green' : 'red'
          },
        },
        {
          default: () => row.changePrice > 0 ? '+' + row.changePrice : row.changePrice
        }
      )
    },
  },
  {
    title: '操作人',
    key: 'des',
    align: 'left',
    width: 100,
    render(row){
      if(row.operatorId > 0){
        return row.adminMemberUsername
      }else{
        return '系统操作'
      }
    }
  },
  {
    title: '原因',
    key: 'des',
    align: 'left',
    width: 200,
    ellipsis: false,
  },
  {
    title: '发生时间',
    key: 'createdAt',
    align: 'left',
    width: 200,
  },
  {
    title: '关联订单号',
    key: 'orderSn',
    align: 'left',
    width: 240,
    render(row){
      if(row.orderSn){
        if(row.orderSn.charAt(0) == 'H'){
          return h(
            NButton,
            {
              strong: true,
              size: 'small',
              text: true,
              type: 'primary',
              onClick: () => handleHotelOrderView({orderSn:row.orderSn,outOrderSn:''}),
            },
            { default: () => row.orderSn }
          )
        }else if(row.orderSn.charAt(0) == 'F'){
          return h(
            NButton,
            {
              strong: true,
              size: 'small',
              text: true,
              type: 'primary',
              onClick: () => handleFoodOrderView({orderSn:row.orderSn}),
            },
            { default: () => row.orderSn }
          )
        }else if(row.orderSn.charAt(0) == 'S'){
          return h(
            NButton,
            {
              strong: true,
              size: 'small',
              text: true,
              type: 'primary',
              onClick: () => handleSpaOrderView({orderSn:row.orderSn}),
            },
            { default: () => row.orderSn }
          )
        }else if(row.orderSn.charAt(0) == 'C'){
          return h(
            NButton,
            {
              strong: true,
              size: 'small',
              text: true,
              type: 'primary',
              onClick: () => handleCarOrderView({orderSn:row.orderSn}),
            },
            { default: () => row.orderSn }
          )
        }

      }else{
        return ''
      }
    }
  },
];

function avatarErr(e){
  e.target.src = defaultImg
}

function handleUpdateValue(e){
  tabValue.value = e;
}

// 加载表格数据
const loadBalanceDataTable = async (res) => {
  res.memberId = params.id
  return await BalanceList({ ...searchBalanceFormRef.value?.formModel, ...res });
};

// 重新加载表格数据
function reloadBalanceTable() {
  actionBalanceRef.value?.reload();
}

// 加载表格数据
const loadExpDataTable = async (res) => {
  res.memberId = params.id
  return await ExpList({ ...searchExpFormRef.value?.formModel, ...res });
};

// 重新加载表格数据
function reloadExpTable() {
  actionExpRef.value?.reload();
}

// 加载表格数据
const loadHotelOrderDataTable = async (res) => {
  res.member_id = params.id
  return await HotelOrderList({ ...searchHotelOrderFormRef.value?.formModel, ...res });
};

// 重新加载表格数据
function reloadHotelOrderTable() {
  actionHotelOrderRef.value?.reload();
}

// 加载表格数据
const loadCouponDataTable = async (res) => {
  res.memberId = params.id
  return await CouponList({ ...res });
};

// // 重新加载表格数据
// function reloadCouponTable() {
//   actionCouponRef.value?.reload();
// }

// 查看详情
function handleHotelOrderView(record: Recordable) {
  hotelOrderViewRef.value.openModal(record);
}

// 查看详情
function handleFoodOrderView(record: Recordable) {
  foodOrderViewRef.value.openModal(record);
}

// 查看详情
function handleCarOrderView(record: Recordable) {
  carOrderViewRef.value.openModal(record);
}

// 查看详情
function handleSpaOrderView(record: Recordable) {
  spaOrderViewRef.value.openModal(record);
}

// 编辑数据
function handleEditBase(type, value) {
  editBaseRef.value.openModal(data.value.id, type, value);
}
// 编辑数据
function handleEditBalance(value) {
  editBalanceRef.value.openModal(data.value.id, value);
}
// 编辑数据
function handleEditExp(value) {
  editExpRef.value.openModal(data.value.id, value);
}

function reloadBalanceInfo(){
  getInfo()
  reloadBalanceTable()
}

function reloadExpInfo(){
  getInfo()
  reloadExpTable()
}

onMounted(() => {
  if (!params.id) {
    message.error('会员ID不正确，请检查！');
    return;
  }
  getConfig({ group: 'yyconfig' })
    .then((res) => {
      recommendModel.value = res.list.recommendModel;
    })
  loadBalanceOptions();
  loadExpOptions();
  loadOptions();
  loadCouponOptions();
  getInfo();
});
</script>

<style lang="less" scoped>
::v-deep(.json-width) {
  width: 100%;
  min-width: 3.125rem;
}

.member-info{
  display: flex;
  .headimg{
    margin-right: 60px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .info{
    flex: 1;
    width: 0;
    padding-top: 10px;
    .data-list{
      width: 100%;
      border-bottom: 1px solid #EEEEEE;
      padding-bottom: 8px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      &:last-child{
        border-bottom: none;
        margin-bottom: 0;
      }

      .data-list-item{
        width: 50%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        .data-list-item-title{
          width: 78px;
          font-weight: 400;
          font-size: 14px;
          color: #4E5969;
          line-height: 22px;
        }
        .data-list-item-cont{
          font-weight: 400;
          font-size: 14px;
          color: #1D2129;
          line-height: 22px;
        }
        .data-list-item-edit{
          font-weight: 400;
          font-size: 14px;
          color: #1577FF;
          line-height: 22px;
          margin-left: 14px;
        }
      }
    }

    .data-list-item1{
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .data-list-item-title1{
        width: 92px;
        font-weight: 400;
        font-size: 14px;
        color: #4E5969;
        line-height: 22px;
      }
      .data-list-item-cont1{
        font-weight: 400;
        font-size: 14px;
        color: #1D2129;
        line-height: 22px;
      }
      .data-list-item-edit1{
        font-weight: 400;
        font-size: 14px;
        color: #1577FF;
        line-height: 22px;
        margin-left: 14px;
      }
    }
  }

}

.statusTab{
  display: flex;
  margin-bottom: 30px;
  div{
    margin-right: 5px;
    padding: 0 16px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #4E5969;
    span{
      cursor: pointer;
    }
    &.active{
      background: #F2F3F8;
      border-radius: 30px;
      color: #1664FF;
      font-weight: 500;
    }
  }
}
</style>


